<template>
    <div class="custom-form">
        <div class="title">工作经验</div>
        <el-form ref="form" :model="form" label-width="0px" :rules="rules">
            <el-form-item label="" prop="practice" v-if="noExp">
                <div class="sex-box">
                    <div class="bg radio-bg">
                        <span>有实习经验</span>
                        <el-radio v-model="form.practice"  :label="true">
                            <span></span>
                        </el-radio>
                    </div>
                    <div class="bg radio-bg">
                        <span>暂无实习经验</span>
                        <el-radio v-model="form.practice"  :label="false">
                            <span></span>
                        </el-radio>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="" prop="company" v-if="form.practice ||  !noExp">
                <el-input v-model="form.company" placeholder="公司名称"></el-input>
            </el-form-item>
            <el-form-item label="" prop="tradeAll" v-if="form.practice ||  !noExp">
                <el-cascader
                        :props="props"
                        ref="trade"
                        :show-all-levels="false"
                        @change="function(val){changeCascader(val,1)}"
                        :options="industryOptions"
                        placeholder="所属行业"
                        v-model="form.tradeAll"
                        clearable
                      >
                </el-cascader>
            </el-form-item>
            <el-form-item label="" prop="job" v-if="form.practice ||  !noExp">
                <el-input  placeholder="职位名称" v-model="form.job"></el-input>
            </el-form-item>
            <el-form-item label="" prop="jobCategoryAll" v-if="form.practice ||  !noExp">
                <el-cascader
                        ref="jobCategory"
                        @change="function(val){changeCascader(val,2)}"
                        :props="props"
                        :show-all-levels="false"
                        :options="jobOptions"
                        placeholder="职位类别"
                        v-model="form.jobCategoryAll"
                        clearable>
                </el-cascader>
            </el-form-item>
            <div class="sub-style" v-if="form.practice ||  !noExp">
                <div class="exp-sub">
                    <el-form-item label="" prop="startTime">
                        <el-date-picker
                                clearable
                                :picker-options="pickerOptions1"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="开始日期"
                                v-model="form.startTime">
                        </el-date-picker>
                    </el-form-item>
                    <div class="sub-line"></div>
                    <el-form-item label="" prop="endTime" >
                        <el-date-picker
                                clearable
                                :disabled="form.toDay"
                                :required="isHaveTo"
                                :picker-options="pickerOptions2"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="结束日期"
                                v-model="form.endTime">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div class="now">
                    <el-form-item label="">
                        <div class="bg radio-bg">
                            <span>至今</span>
                            <el-checkbox v-model="form.toDay" >
                                <span></span>
                            </el-checkbox>
                        </div>
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="" prop="preTaxWage" v-if="form.practice ||  !noExp">
                <el-input v-model="form.preTaxWage" placeholder="税前月薪"></el-input>
            </el-form-item>
            <el-form-item label="" prop="remark" v-if="form.practice ||  !noExp">
                <el-input
                        rows="6"
                        type="textarea"
                        placeholder="工作描述"
                        v-model="form.remark"
                        maxlength="500"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-form>
        <div class="line"></div>
        <inte-info
                :basicForm="basicForm"
                :workPlaces="workPlaces"
                :statusArr="statusArr"
                :industryOptions="industryOptions"
                :jobOptions="jobOptions"
                v-if="power1 && power2"
                :pass="pass"
                @validForm="validForm"
                @pre="preAction"
                @next="next"></inte-info>
    </div>
</template>

<script>
    import InteInfo from './inteInfo.vue';
    import { getIndustry } from '../../../api/registerInfo.js';
    import { getJobType } from '../../../api/registerInfo.js';
    import { getSelect } from '../../../api/registerInfo.js';
    export default {
        props:['noExp','resumeId'],
        data() {
            let salaryPass = (rule,value,callback) => {
                let reg = /^[0-9]*$/;
                if(value < 0){
                    callback(new Error("不能为负数"));
                } else if (value  && !reg.test(value)) {
                    callback(new Error("请输入整数"));
                } else if(!value){
                    callback();
                }else if(String(value).length > 5000000 ){
                    callback(new Error("不能多于5000000字"));
                }else {
                    callback();
                }
            }
            let validateName = (rule, value, callback) => {
                if (!value && this.isHaveTo) {
                    callback(new Error("请输入结束日期"));
                } else {
                    callback();
                }
            }
            return {
                basicForm: { },
                workPlaces:[],
                statusArr: [],
                trade:[],
                jobCategory: [],
                jobOptions: [],
                industryOptions: [],
                temp: [],
                props: {
                    value: "code",
                    label: "name",
                    children: "childVo",
                },

                pass: false,
                pickerOptions1:{},
                pickerOptions2:{},
                power1: false,
                power2: false,
                form:{
                    jobCategoryAll:null,
                    job:null,
                    tradeAll:null,
                    company:null,
                    practice:null,
                    startTime:'',
                    endTime:'',
                    toDay:null,
                    preTaxWage:null,
                    remark:null,
                    step: 4
                },
                rules:{
                    practice:[
                        { required: true, message: '请选择有无实习经验', trigger: 'change' }
                    ],
                    company:[
                        { required: true, message: '请输入公司名称', trigger: 'blur' },
                        { max:20, message: '请输入20字以内', trigger: 'change' }
                    ],
                    tradeAll:[
                        { required: true, message: '请选择所属行业', trigger: 'change' }
                    ],
                    jobCategoryAll:[
                        { required: true, message: '请选择职位类别', trigger: 'change' }
                    ],
                    job:[
                        { required: true, message: '请输入职位名称', trigger: 'blur' },
                        { max:20, message: '请输入20字以内', trigger: 'change' }
                    ],
                    startTime: [
                        { required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    endTime: [
                        { validator: validateName },
                    ],
                    preTaxWage: [
                        { required: true, message: '请输入税前月薪', trigger: 'blur' },
                        { validator: salaryPass, trigger: 'change' }
                    ],
                    remark: [
                        { required: true, message: '请输入工作描述', trigger: 'blur' }
                    ]
                }
            };
        },
        components: {
            InteInfo
        },
        computed: {
            isHaveTo() {
                return !this.form.toDay;
            }
        },
        watch: {
            'form.toDay': function(val) {
                if(val) {
                    let _field = this.$refs['form'].fields
                    _field.map(i => {
                        if(i.prop === 'endTime'){
                            this.form.endTime = ""
                            i.clearValidate()
                        }
                    })
                } else {
                    let _field = this.$refs['form'].fields
                    _field.map(i => {
                        if(i.prop === 'endTime'){
                            i.validate()
                        }
                    })
                }
            },
            'form.practice': function(val) {
                if(val == true || val == false) {
                    let _field = this.$refs['form'].fields
                    _field.map(i => {
                        if(i.prop === 'practice'){
                          i.clearValidate()
                        }
                   })
                }
            }
        },
        created() {
            this.pickerOptions1.disabledDate = (time)=> {
                if(this.form.endTime) {
                    return  time.getTime() > new Date(this.form.endTime) ||time.getTime() > Date.now()
                } else {
                    return time.getTime() > Date.now()
                }

            }
            this.pickerOptions2.disabledDate = (time)=> {
                if(this.form.startTime) {
                    return  time.getTime() < new Date(this.form.startTime) ||time.getTime() > Date.now()
                } else {
                    return time.getTime() > Date.now()
                }
            }
            this.getBasicData();
        },

        methods: {
            getBasicData() {
                const promiseArr = [];
                let a = new Promise(resolve => {
                    getIndustry().then(res => {
                        if (res.success) {
                            this.industryOptions = res.data || [];
                            this.power1 = true;
                            resolve();
                        } else {
                            this.$message.error(`${res.msg}`);
                        }
                    });
                });
                let b = new Promise(resolve => {
                    getJobType().then(res => {
                        if (res.success) {
                            this.jobOptions = res.data || [];
                            this.power2 = true;
                        } else {
                            this.$message.error(`${res.msg}`);
                        }
                    });
                });

                let c = new Promise(resolve => {
                    getSelect().then(res => {
                        if (res.success) {
                            this.workPlaces = res.data.area || [];
                            this.statusArr = res.data.current_status || []
                        } else {
                            this.$message.error(`${res.msg}`);
                        }
                    });
                });

                promiseArr.push(a);
                promiseArr.push(b);
                promiseArr.push(c);
                Promise.all(promiseArr);
            },
            initData(result,options,field) {
               this.form[field] = [];
                result.forEach(item => {
                    options.forEach( i => {
                        if(i.childVo) {
                            i.childVo.forEach( a => {
                                if(a.id == item) {
                                    let arr = [];
                                    arr.push(i.id);
                                    arr.push(item);
                                    this.form[field].push(arr)
                                }
                                if(a.childVo) {
                                    a.childVo.forEach( b => {
                                        if(b.id == item) {
                                            let arr = [];
                                            arr.push(i.id);
                                            arr.push(a.id);
                                            arr.push(item);
                                            this.form[field].push(arr)
                                        }
                                    })
                                }
                            })
                        }
                    })
                })
            },
            validForm() {
             this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.pass = true;
                    } else {
                        this.pass = false;
                    }
                });
            },
            next(data) {
                this.form = {...this.form,...data};
                console.log(this.form)
                this.form.step = 4;
                this.form.resumeId = this.resumeId;
                this.$emit('save',this.form)
            },
            preAction() {
                this.$emit('goBack')
            },
            changeCascader(val,type) {
                if(type == 1) {
                    this.form.trade = JSON.stringify(val);
                } else {
                    this.form.jobCategory  =  JSON.stringify(val);
                }

            }
        }
    };
</script>

<style scoped>
    .line {
        width: 100%;
        height: 1px;
        background: #ccc;
        margin: 37px 0;
    }
    .sub-line {
        width: 12px;
        margin: 4px;
        height: 1px;
        background: #CCCCCC;
        display: inline-block;
        margin-top: 22px;
    }
    .title {
        color: #222222;
        font-size: 20px;
        font-weight:600;
        margin-bottom: 38px;
    }
    .sub-style {
        display: flex;
        justify-content: space-between;
    }
    .exp-sub {
        display: flex;
        width: 268px!important;
    }
    .bg {
        width: 100%;
        background: #F8F8F8;
        padding: 12px 24px;
        box-sizing:  border-box;
        -webkit-box-sizing:  border-box;
        -ms-box-sizing:  border-box;
        -moz-box-sizing:  border-box;
        -o-box-sizing:  border-box;
        display: inline-block;
    }
    .sub-style .bg {
        padding: 12px 20px;
    }
    .sex-box {
        display: flex;
    }
    .radio-bg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 44px;
    }
    .radio-bg:first-child {
        margin-right: 36px;
    }
    .sub-style>div:first-child {
        width: 237px;
    }
    .sub-style>div:last-child {
        width: 107px;
    }
    .sub-style .now {
        width: 94px!important;
    }
</style>